import React from 'react';
import styles from './HeaderCom.module.css';

type DropdownProps = {
  position: DOMRect | null;
  visible: boolean;
  content: React.ReactNode;
};
export default function DropdownMenu({ position, visible, content }: DropdownProps) {
  if (!visible || !position) return null;

  return (
    <div 
      className={`${styles.dropdownMenu} ${visible ? styles.dropdownMenuVisible : ''}`}
      style={{
        left: position.left,
        top: position.bottom + 8,
      }}
    >
      <div className={styles.dropdownContent}>
        {content}
      </div>
    </div>
  );
}